$(function () {
    /*猫头鹰*/
    $('#password').focus(function () {
        // 密码框获得焦点，追加样式.password
        $('#owl').addClass('password');
    }).blur(function () {
        // 密码框失去焦点，移除样式.password
        $('#owl').removeClass('password');
    });
    //将Cookie的数据写到输入框中

    /*提示注册成功的信息*/

    /* 验证码的js */
    var div = document.querySelector('#ge-captcha');
    var characters = "QWETYUIOPASDFGHJKLZXCVBNMqwertyuiopasdfghjklzxcvbnm1234567890";
    var str;

    function getRandom(l, r) {
        return parseInt(l + Math.random() * (r - l + 1));
    }

    function run() {
        str = '';
        while (div.hasChildNodes()) {
            div.removeChild(div.firstChild);
        }
        for (var i = 0; i < 4; i++) {
            var span = document.createElement('span');
            span.innerHTML = characters[getRandom(0, characters.length - 1)];
            span.style.display = 'inline-block';
            span.style.fontSize = getRandom(16, 32) + 'px';
            span.style.color = 'rgb(' + getRandom(0, 200) + ',' + getRandom(0, 200) + ',' + getRandom(0, 200) + ')';
            span.style.transform = 'translate(' + getRandom(-5, 5) + 'px, ' + getRandom(-5, 5) + 'px) rotate(' + getRandom(-20, 20) + 'deg)';
            str += span.innerHTML;
            div.appendChild(span);
        }
    }

    run();
    //每次点击验证码都刷新
    div.addEventListener('click', run);

    /*提交表单*/
    $('#btn').click(function () {
        var t = 1;//非空判断，互斥标记（也能够限制填写先后顺序，先必须填好用户名）
        var username = document.querySelector("#username");
        var password = document.querySelector("#password");
        var captcha = document.querySelector("#in-captcha");
        /*非空校验*/

        /*用户名输入框非空判断*/
        if (username.value == null || username.value == "") {
            //用户名为空，提示
            $('#username').focus().addClass('outlineColor').blur(function () {
                //用户名为空，就给输入框加红框，当焦点消失时恢复原本样式
                $('#username').removeClass('outlineColor');
            });
            t = 0;
        }
        /*密码输入框非空判断*/
        if (t == 1 && (password.value == null || password.value == "")) {
            //密码为空，提示,增加焦点，边框变红
            $('#password').focus().addClass('outlineColor').blur(function () {
                $('#password').removeClass('outlineColor');
            });
            t = 0;
        }
        /*验证码输入框非空判断*/
        //用户名和密码都非空，就开始进行验证码校验，验证码错误，f置0，同时刷星验证码
        if (t == 1 && (captcha.value == null || captcha.value == "")) {
            run();//刷新验证码
            $('#in-captcha').focus().addClass('outlineColor').blur(function () {
                //验证码为空，就给输入框加红框，当焦点消失时恢复原本样式
                $('#in-captcha').removeClass('outlineColor');
            });
            t = 0;
        }
        /*检验验证码是否正确*/
        if (t == 1 && captcha.value.toLowerCase() != str.toLowerCase()) {
            //验证码不正确，给与提示，提示2s后消失
            run();
            //将焦点放到验证码输入框中
            $('#in-captcha').focus().addClass('outlineColor').blur(function () {
                //验证码为空，就给输入框加红框，当焦点消失时恢复原本样式
                $('#in-captcha').removeClass('outlineColor');
            });
            //给予提示信息，2s后消失
            $('#captcha-error').css('display', 'inline-block').fadeOut(2000, 'linear');
            t = 0;
        }
        //发送给servlet的用户数据
        var params = {
            username: username.value,
            password: password.value
        }
        //判断是否需要发送Cookie，如果remember被选中（true）就发送Cookie
        var remember = $("#remember").is(":checked");
        // console.log("remember=" + remember);//测试
        /* 验证码正确就发送给servlet的用户数据*/
        if (t == 1) {
            //如果验证码正确就发送请求给服务器，进行用户信息校验
            axios({
                method: "post",
                url: "http://localhost:8080/day16_final/user/select?remember=" + remember,
                data: params
            }).then(resp => {
                if ((resp.data + "") == "false") {
                    run();
                    //密码错误，给予提示信息,2s后消失
                    $('#password-error').css('display', 'inline-block').fadeOut(3000, 'linear');
                } else {
                    location.href = "./brand.html";
                }
            })
        }
    })
});